<template>
  <div class="computer">
    <div class="result">{{ result }}</div>
    <el-row @click.native="onClick" :gutter="10">
      <el-col v-for="item in showArr" :key="item" :span="6">
        <div :data-item="item">{{ item }}</div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import calculate from "@/utils/calculate";
export default {
  name: "Computer",
  data() {
    return {
      showArr: [
        "(",
        ")",
        "%",
        "del",
        "1/x",
        "x^2",
        "sqrt(x)",
        "/",
        "7",
        "8",
        "9",
        "*",
        "4",
        "5",
        "6",
        "-",
        "1",
        "2",
        "3",
        "+",
        "Clear",
        "0",
        ".",
        "=",
      ],
      result: 0,
      //   compStr: [],
    };
  },
  methods: {
    onClick(e) {
      //   console.log("e: ", e.target.dataset.item);
      const { item } = e.target.dataset;
      //   console.log("item: ", item);
      if (item == undefined) {
        return;
      }
      if (item === "=") {
        // console.log("计算");
        this.result = calculate(this.result);
        return;
      }
      if (item == "Clear") {
        this.result = 0;
        return;
      }
      //   如果是计算操作,而不是数字

      if (this.result == 0) {
        this.result = item;
      } else {
        this.result += item;
      }
    },
  },
};
</script>

<style lang='less' scoped>
@commonHeight: calc(350px / 4 * 1.4);
@commonSpace: 5px;
.computer {
  width: 400px;
  background-color: #f3f3f3;
  padding: 10px;
  .result {
    width: 100%;
    height: 100px;
    background-color: #fff;
    // margin-top: @commonSpace;
    text-align: right;
    line-height: 100px;
    font-size: 3em;
    // padding: 5px;
  }
  .el-row {
    .el-col {
      height: @commonHeight;
      text-align: center;
      line-height: @commonHeight;
      //   padding: @commonSpace 0;
      padding-top: @commonSpace;
      padding-bottom: @commonSpace;
      //   margin: @commonSpace;
      //   margin-right: @commonSpace;
      div {
        background-color: #f9f9f9;
        height: 100%;
      }
    }
  }
}
</style>